<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Aschafs</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <app-root>
        <style>
            app-root {
                display: block;
                margin: auto;
                width: 250px;
                height: 250px;
                position: relative;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .loader {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 250px;
                height: 250px;
                animation-name: rotateAnim;
                -o-animation-name: rotateAnim;
                -ms-animation-name: rotateAnim;
                -webkit-animation-name: rotateAnim;
                -moz-animation-name: rotateAnim;
                animation-duration: 0.77s;
                -o-animation-duration: 0.77s;
                -ms-animation-duration: 0.77s;
                -webkit-animation-duration: 0.77s;
                -moz-animation-duration: 0.77s;
                animation-iteration-count: infinite;
                -o-animation-iteration-count: infinite;
                -ms-animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
                -moz-animation-iteration-count: infinite;
                animation-timing-function: linear;
                -o-animation-timing-function: linear;
                -ms-animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }

            .loader div {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 3px solid rgba(0, 0, 0, 0.64);
                position: absolute;
                top: 5px;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

            .loader div:nth-child(odd) {
                border-top: none;
                border-left: none;
            }

            .loader div:nth-child(even) {
                border-bottom: none;
                border-right: none;
            }

            .loader div:nth-child(2) {
                border-width: 5px;
                left: 0px;
                top: -10px;
                width: 30px;
                height: 30px;
            }

            .loader div:nth-child(3) {
                border-width: 5px;
                left: -3px;
                top: 8px;
                width: 45px;
                height: 45px;
            }

            .loader div:nth-child(4) {
                border-width: 8px;
                left: -3px;
                top: -10px;
                width: 60px;
                height: 60px;
            }

            .loader div:nth-child(5) {
                border-width: 8px;
                left: -3px;
                top: 10px;
                width: 80px;
                height: 80px;
            }

            .loader div:nth-child(6) {
                border-width: 10px;
                left: 0px;
                top: -10px;
                width: 100px;
                height: 100px;
            }

            .loader div:nth-child(7) {
                border-width: 10px;
                left: 0px;
                top: 15px;
                width: 125px;
                height: 125px;
            }


            @keyframes rotateAnim {
                from {
                    transform: rotate(360deg);
                }
                to {
                    transform: rotate(0deg);
                }
            }

            @-o-keyframes rotateAnim {
                from {
                    -o-transform: rotate(360deg);
                }
                to {
                    -o-transform: rotate(0deg);
                }
            }

            @-ms-keyframes rotateAnim {
                from {
                    -ms-transform: rotate(360deg);
                }
                to {
                    -ms-transform: rotate(0deg);
                }
            }

            @-webkit-keyframes rotateAnim {
                from {
                    -webkit-transform: rotate(360deg);
                }
                to {
                    -webkit-transform: rotate(0deg);
                }
            }

            @-moz-keyframes rotateAnim {
                from {
                    -moz-transform: rotate(360deg);
                }
                to {
                    -moz-transform: rotate(0deg);
                }
            }
        </style>
        <div class="loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </app-root>
</body>

</html>